var vm = new Vue({
    el : '#app',
    data : {
        host: HOST,
        username: sessionStorage.username || localStorage.username,
        user_id: sessionStorage.user_id || localStorage.user_id,
        // user_id:"1",
        token: sessionStorage.token || localStorage.token,
        questions:'',
        count:0,
        page_size:6,
        page:1,
        tag:'index',
        show:'update',
        // status:false,
        password:'',
        remember: false,
        keyword:''
    },
    computed: {
        total_page: function(){  // 总页数
            return Math.ceil(this.count/this.page_size);
        },
        next: function(){  // 下一页
            if (this.page >= this.total_page) {
                return 0;
            } else {
                return this.page + 1;
            }
        },
        previous: function(){  // 上一页
            if (this.page <= 0 ) {
                return 0;
            } else {
                return this.page - 1;
            }
        },
        page_nums: function(){  // 页码
            // 分页页数显示计算
            // 1.如果总页数<=5
            // 2.如果当前页是前3页
            // 3.如果当前页是后3页,
            // 4.既不是前3页，也不是后3页
            var nums = [];
            if (this.total_page <= 5) {
                for (var i=1; i<=this.total_page; i++){
                    nums.push(i);
                }
            } else if (this.page <= 3) {
                nums = [1, 2, 3, 4, 5];
            } else if (this.total_page - this.page <= 2) {
                for (var i=this.total_page; i>this.total_page-5; i--) {
                    nums.push(i);
                }
            } else {
                for (var i=this.page-2; i<this.page+3; i++){
                    nums.push(i);
                }
            }
            return nums;
        }
    },
    mounted: function () {
        axios.get(this.host + 'questions/',{
            params:{
                catalog:this.tag,
                show:this.show
            },
             responseType: 'json'
        })
            .then(response => {
                this.count = response.data.count
                this.questions=response.data.results
            })

    },
    methods: {
        logout(){
            sessionStorage.clear();
            localStorage.clear();
            location.href = '/login.html';
        },
        // 获取url路径参数
        get_query_string: function (name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return decodeURI(r[2]);
            }
            return null;
        },
        // 请求商品数据
        get_question: function () {
            axios.get(this.host + 'questions/', {
                params: {
                    catalog:this.tag,
                    show:this.show,
                    page: this.page,
                    page_size: this.page_size,
                },
                responseType: 'json'
            })
                .then(response => {
                    this.count = response.data.count;
                    this.questions = response.data.results;
                })
        },
        // 点击页数
        on_page: function (num) {
            if (num != this.page) {
                this.page = num;
                this.get_question();
            }
        },
        getTag: function (e,num) {
             this.tag = num
             // console.log(this.tag)
            axios.get(this.host + 'questions/', {
                params: {
                    catalog:this.tag,
                    show:this.show
                },
                responseType: 'json'
            })
                .then(response => {
                    this.count = response.data.count;
                    this.questions = response.data.results;
                })
        },
        getShow: function (e,num) {
             this.show = num;
             // console.log(this.show)
            axios.get(this.host + 'questions/', {
                params: {
                    catalog:this.tag,
                    show:this.show
                },
                responseType: 'json'
            })
                .then(response => {
                    this.count = response.data.count;
                    this.questions = response.data.results;
                })
        },
        
        on_submit: function(){
            axios.post(this.host+'authorizations/', {
                    username: this.username,
                    password: this.password
                }, {
                    responseType: 'json',
                    withCredentials: true,
                })
                .then(response => {
                    // 使用浏览器本地存储保存token
                    if (this.remember) {
                        // 记住登录
                        sessionStorage.clear();
                        localStorage.token = response.data.token;
                        localStorage.user_id = response.data.user_id;
                        localStorage.username = response.data.username;
                    } else {
                        // 未记住登录
                        localStorage.clear();
                        sessionStorage.token = response.data.token;
                        sessionStorage.user_id = response.data.user_id;
                        sessionStorage.username = response.data.username;
                    }

                    // 跳转页面
                    var return_url = this.get_query_string('next');
                    if (!return_url) {
                        return_url = '/index.html';
                    }
                    location.href = return_url;
                })
        },
        search:function () {
            axios.get(this.host + 'questions/search',{
                params:{
                    keyword:this.keyword
                }
            }).
                then(response => {
                    this.count = response.data.count;
                    this.questions = response.data.results;
            })
        }
    }
})
